<!DOCTYPE html>
<html>
<head>
	<%include("/meta.html"){}%>
	<%include("/include.html"){}%>
</head>
<script>
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;
    //多文件列表示例
    var demoListView = $('#demoList')
        ,uploadListIns = upload.render({
        elem: '#testList'
        ,url: '/upload/upload.do'
        ,accept: 'file'
        ,multiple: true
        ,auto: false
        // ,data: {
        //     kywd: function(){
        //         return $("#kywd").val();
        //     },
			// tpcd:function () {
			// 	return '${tpcd!}';
        //     }
        // }
        ,bindAction: '#testListAction'
        ,choose: function(obj){

            var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
            //读取本地文件
            obj.preview(function(index, file, result){

                var tr = $(['<tr id="upload-'+ index +'">'
                    ,'<td>'+ file.name +'</td>'
                    ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                    ,'<td>等待上传</td>'
                    ,'<td>'
                    ,'<button class="layui-btn layui-btn-mini demo-reload layui-hide">重传</button>'
                    ,'<button class="layui-btn layui-btn-mini layui-btn-danger demo-delete">删除</button>'
                    ,'</td>'
                    ,'</tr>'].join(''));

                //单个重传
                tr.find('.demo-reload').on('click', function(){
                    obj.upload(index, file);
                });

                //删除
                tr.find('.demo-delete').on('click', function(){
                    delete files[index]; //删除对应的文件
                    tr.remove();
                    uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                });

                demoListView.append(tr);
            });
        }
        ,done: function(res, index, upload){
            if(res.code == 0){ //上传成功

                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                tds.eq(3).html(''); //清空操作
                return delete this.files[index]; //删除文件队列已经上传成功的文件
            }
            this.error(index, upload);
        }
        ,error: function(index, upload){
            var tr = demoListView.find('tr#upload-'+ index)
                ,tds = tr.children();
            tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
            tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
        }
    });


    });
</script>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
	<legend>多文件上传列表</legend>
</fieldset>
<div class="layui-upload">
	<!--<div class="layui-form-item">-->
		<button type="button" class="layui-btn layui-btn-normal" id="testList"><i class="layui-icon layui-icon-wenjianjia"></i>选择多文件</button>
		<!--<div class="layui-inline">-->
			<!--<input type="text" class="layui-input" style="width: 300px" id="kywd" placeholder="可以输入查询关键字,分号;分隔"/>-->
		<!--</div>-->
	<!--</div>-->
	<div class="layui-upload-list" >
		<table class="layui-table" >
			<thead>
			<tr><th>文件名</th>
				<th>大小</th>
				<th>状态</th>
				<th>操作</th>
			</tr></thead>
			<tbody id="demoList"></tbody>
		</table>
	</div>
	<button type="button" class="layui-btn" id="testListAction"><i class="layui-icon layui-icon-weibiaoti1"></i>开始上传</button>
</div>
</body>
</html>
